<template>
	<view class="uni_box home">
		<!-- <navbar title='排行'>
		</navbar> -->
		<view class="content">
			
			<image class="paibg" src="/static/mine/paibg.png"></image>
			<view class="pview">
				<view class="pone">
					<image class="paifan" src="/static/img/icon_back.png" @click="getfan"></image>
					<text class="pname">排行榜</text>
				</view>
				<view class="ptwo">
					<view class="pnav">
						
						<view class="navone one"  v-if="list[1]">
							<image class="paitou" :src="list[1].avatar?list[1].avatar:'/static/mine/tous.png'"></image>
							<text class="pxingming">{{list[1].nickname}}</text>
							<text class="yshi">￥{{list[1].money}}</text>
						</view>
						<view class="navone " v-if="list[0]">
							<image class="paitou" :src="list[0].avatar?list[0].avatar:'/static/mine/tous.png'"></image>
							<text class="pxingming">{{list[0].nickname}}</text>
							<text class="yshi">￥{{list[0].money}}</text>
						</view>
						<view class="navone three" v-if="list[2]">
							<image class="paitou" :src="list[2].avatar?list[2].avatar:'/static/mine/tous.png'"></image>
							<text class="pxingming">{{list[2].nickname}}</text>
							<text class="yshi">￥{{list[2].money}}</text>
						</view>
					</view>
					<view class="ptai">
						<image class="painav" src="/static/mine/paita.png"></image>
					</view>
					
					<view class="plist">
						<view class="pitem" v-for="(item,index) in list" v-if="item.sort>=4" :key="index">
							<text class="shuzi">{{ item.sort }}</text>
							<image class="tous" :src="item.avatar?item.avatar:'/static/mine/tous.png'"></image>
							<view class="pxin">
								<text class="pxing">{{item.nickname}}</text>
								<!-- <text class="yshia">{{item.use_time_date}}</text> -->
							</view>
							<text class="fenzhi">累计收益： <text class="price">{{item.money}}</text>元</text>
						</view>
					</view>
				</view>
			</view>

			<view class="myview" v-if="my">
				<image class="tous" :src="my.avatar?my.avatar:'/static/mine/tous.png'"></image>
				<view class="mynav">
					<text class="mtit">{{my.nickname}}</text>
					<text class="mpai">本周量排名100+</text>
				</view>
				<view class="lei">
					<text class="leiname">累计收益：<text class="yuan">{{my.money}}</text>元</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paper_id:'',
				id:'',
				info:{},
				list:[],
				three:[],
				my:[]
			}
		},
		onLoad(option) {
			// this.id = option.id
			// this.paper_id = option.paper_id
			this.getDetail()
		},
		onShow() {
		},
		methods: {
			async getDetail(){
				let res = await this.$u.api.getRankList({
				});
				this.my = res.my
				this.list = res.list
			},
			getfan(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		position: relative;
		padding-bottom: 150rpx;
		.paibg{
			position: absolute;
			width: 100%;
			// height: 100%;
			height: 660rpx;

		}
		.pview{
			position: relative;
			width: 100%;
			height: 100%;
			padding: 30rpx;

		}
		.pone{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 20rpx 0;
			// #ifdef APP-PLUS
			padding-top: calc(var(--status-bar-height) + 20rpx);
			// #endif
			.paifan{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 0rpx;

			}
			.pname{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}
		.ptwo{
			display: flex;
			flex-direction: column;
			.ptai{
				width: 100%;
				height: 180rpx;
				position: relative;
			    .painav{
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}
			.pnav{
				display: flex;
				flex-direction: row;
				margin-bottom: 20rpx;
				margin-top: 65px;
				.navone{
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.paitou{
						width: 120rpx;
						height: 120rpx;
						margin-bottom: 9rpx;
						border-radius: 50%;
					}
					.pxingming{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #FFFFFF;
						display: block;
						margin-bottom: 10rpx;
					}
					.fen{
						background: rgba(255,255,255,0.2);
						border-radius: 6rpx;
						border: 1px solid #FFFFFF;
						padding: 5rpx 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						margin: 15rpx 0;
					}
					.yshi{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
				.one{
					position: relative;
					top: 30rpx;
				}
				.three{
					position: relative;
					top: 60rpx;
				}
			}
		}
		.ptji{
			background: rgba(255,255,255,0.2);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;
			padding: 20rpx 20rpx 50rpx;
			.tbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.tongnav{
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				align-items: center;
				.tongitem{
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.tnum{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 50rpx;
						color: #FFFFFF;
					}
					.kaoren{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						display: block;
						margin-top: 5rpx;
					}
				}
				.pline{
					background: #FFFFFF;
					width: 2rpx;
					height: 60rpx;
				}
			}
		}
		.plist{
			margin-top: 20rpx;
			.pitem{
				padding: 20rpx 40rpx;
				background: rgba(255,255,255,0.8);
				border-radius: 20rpx;
				border: 2rpx solid #FFFFFF;
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 20rpx;
				.shuzi{
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 50rpx;
					color: #3E65E5;
					display: inline-block;
					margin-right: 30rpx;
				}
				.tous{
					width: 87rpx;
					height: 87rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.pxin{
					flex: 1;
					display: flex;
					max-width: 60%;
					flex-direction: column;
					.pxing{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
					}
					.yshia{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: inline-block;
						margin-top: 10rpx;
					}
				}
				.fenzhi{
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
					margin-left: auto;

				}
				.price{
					color: #E63F46;
					display: inline-block;
					margin: 0 8rpx;
				}
			}
		}
	}
	.myview{
		position: fixed;
		width: 100%;
		height: 120rpx;
		background: #F8F8F8;
		// border-radius: 20rpx;
		// border: 2px solid #FFFFFF;
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		width: 100%;
		bottom: 0;
		border-top: 1rpx solid #eee;
		.tous{
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 20rpx;

		}

		.mynav{
			display: flex;
			flex-direction: column;
			.mtit{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				display: block;
				margin-bottom: 6rpx;
			}
			.mpai{
				font-weight: 500;
				font-size: 24rpx;
				color: #E63F46;
			}
		}
		.lei{
			margin-left: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			.leiname{
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
			.yuan{
				font-weight: bold;
				font-size: 32rpx;
				color: #E63F46;
				display: inline-block;
				margin: 0 4rpx;
			}
		}
	}
</style>
